import React, { useState } from 'react';
import { WorkItemProps } from './types';

const WorkItem: React.FC<WorkItemProps> = ({
    title,
    description,
    imageUrl,
    category,
    editable = true,
    displayData = true,
    promote = true,
    downloable = true,
    activity = true,
    views,
    visitors,
    pixels,
    formNumber,
}) => {
    const [isHovered, setIsHovered] = useState(false);

    return (
        <div
            style={{
                ...styles.container,
                ...(isHovered ? styles.hoveredContainer : {}),
            }}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            <img src={imageUrl} alt={title} style={styles.image} />
            {!isHovered ? (
                <div>
                    <p style={styles.category}>{category}</p>
                    <h3>{title}</h3>
                    <p>{description}</p>
                </div>
            ) : (
                <div style={styles.buttonContainer}>
                    {editable && <button style={styles.button}>编辑</button>}
                    {displayData && <button style={styles.button}>数据</button>}
                    {promote && <button style={styles.button}>推广</button>}
                    {downloable && <button style={styles.button}>下载</button>}
                    {activity && <button style={styles.button}>活动推广</button>}
                </div>
            )}
            <div style={styles.bottom}>
                {category === '视频' && (
                    <p>{views}浏览  {visitors}访客</p>
                )}
                {category === '海报' && (
                    <p>({pixels}像素)</p>
                )}
                {(category === '表单' || category === '互动' || category === 'H5') && (
                    <p>{views}浏览 {visitors}访客 {formNumber}表单</p>
                )}
            </div>
        </div>
    );
};

const styles = {
    container: {
        width: '210px',
        height: '330px',
        border: '1px solid #E0E0E0',
        borderRadius: '8px',
        padding: '16px',
        margin: '8px',
        backgroundColor: '#fff',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
        position: 'relative',
        transition: 'transform 0.3s, box-shadow 0.3s', // 添加过渡效果
    },
    hoveredContainer: {
        transform: 'translateY(-4px)', // 向上移动 4 像素
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // 增加阴影
    },
    image: {
        width: '100%',
        borderRadius: '8px',
        marginBottom: '12px',
    },
    category: {
        width: '36px',
        height: '24px',
        lineHeight: '24px',
        textAlign: 'center',
        borderRadius: "4px",
        color: "#1261ff",
        backgroundColor: '#e7efff',
    },
    buttonContainer: {
        display: 'flex',
        gap: '8px',
        marginTop: '12px',
    },
    button: {
        padding: '8px 12px',
        border: 'none',
        borderRadius: '4px',
        backgroundColor: '#1261ff',
        color: 'white',
        cursor: 'pointer',
        transition: 'background-color 0.3s',
    },
    bottom: {
        position: 'absolute',
        bottom: '6px',
    }
};

export default WorkItem